<style>
body{-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
/* ===================== */
/* 主题模块大体 */
/* ===================== */
#mode_select {position: fixed; right: 0px; top: 0px; bottom: 0px; left: 0px;  z-index: 999; display: none; }
#mode_select .container {position: relative; left: 0px; top: 0px; right: 0px; bottom: 0px; margin: 0px; margin-left: 400px; width: auto; height: 100%; background-color: #fff; padding: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* ===================== */
/* 動效 */
/* ===================== */
#mode_select.active {animation: showThemeSelector .5s; animation-fill-mode: forwards; }
#mode_select.unActive {animation: closeThemeSelector .5s; animation-fill-mode: forwards; }
@keyframes showThemeSelector {0% { display: none; } 1% {display: block; background-color: rgba(0,0,0,0.1); } 100% {background-color: rgba(0,0,0,0.8); } }
@keyframes closeThemeSelector {0% {display: block; background-color: rgba(0,0,0,0.8); } 1% {background-color: rgba(0,0,0,0.5); } 100% { display: none; } }
#mode_select > .container { transform: translateX(100%); transition: all .5s; }
#mode_select.active > .container { transform: translateX(0%); }
#mode_select.active #cancel_theme {display: block; }

/* ===================== */
/* 主题选择 */
/* ===================== */
#models {height: 100%; overflow-y: scroll; margin-right: 300px; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#mode_select .img-responsive{padding: 5px;border: solid 1px #ddd; opacity: .5; }
#mode_select .img-responsive:hover{ opacity: 1; }
#mode_select .selected p.theme-title{ color: #ff9900; }
#mode_select .selected .img-responsive{ padding: 4px;border: solid 2px #ff6600;cursor: pointer; opacity: 1}
#models > .col-md-3 > label { width: 100%; }
#models > .col-md-3 > label > img { width: 100%; }
/* ===================== */
/* 主题描述文案 */
/* ===================== */
#model_info {position: absolute; right: 0px; width: 300px; top: 0px; bottom: 0px; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#model_info .info_title { padding: 15px 0px; color: #9598a3; border-bottom: solid 1px #ddd; }
#model_info .info_title span { color: #293044; }

/* ===================== */
/* 关闭遮罩层 */
/* ===================== */
#cancel_theme { position: absolute; left: 0px; top: 0px; width: 400px; bottom: 0px; background: transparent; cursor: pointer; display: none; vertical-align: middle; text-align: center; }
#cancel_theme label {color: #fff; display: block; position: absolute; top: 50%; left: 50%; margin-left: -150px; text-align: center; width: 300px; cursor: pointer; }

</style>
<link rel="stylesheet" type="text/css" href="http://cdn.stosz.com/bootstrap/bootstrap.min.css?v=1.2">
<div id="mode_select" data-select="" class="">
    <div id="cancel_theme"><label for="">点击黑色区域关闭模版选择</label></div>
    <div class="container">
        <input type="hidden" id="username" value="{{ admin.username }}">
        <!--  -->
        <div class="panel-heading" style="display:none; ">
            <select id="area">
                <option value="">地区选择</option>
            </select>
            <select id="arealang">
                <option value="">适用语言</option>
            </select>
            <select id="type_goods">
                <option value="">适用套餐</option>
                <option value="单产品">单产品</option>
                <option value="2个套餐">2个套餐</option>
                <option value="多个套餐">多个套餐</option>
            </select>
            <select id="pay_type">
                <option value="">支付方式</option>
                <option value="货到付款">货到付款</option>
                <option value="易极付">易极付</option>
                <option value="paypal">paypal</option>
            </select>
            <select id="use_number">
                <option value="最新上线">最新上线</option>
            </select>
            <button class="btn btn-default" type="submit">查询</button>
        </div>
        <!-- theme -->
        <div id="models"></div>
        <!-- theme introduce -->
        <div id="model_info"></div>
        <input name="theme" type="hidden" value="{% if theme %}{{ theme }}{% else %}{{ themes.0 }}{% endif %}" id="setTheme">
        <!-- button -->
        <button id="confirm_theme">選擇模板</button>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var areat_id = $.trim($('#id_zone').find('option:selected').text());
        var lang_id = $.trim($('id_lang').find('option:selected').text());
        var module = $.trim($('#this_theme').val());
        var localData = null;

        var dicts;//本地对象
        var timestamp = new Date().getTime();
        // var configUrl = "./template/config/theme";
        var configUrl = "http://cdn.stosz.com/config/theme";
        $.ajax({
            url: configUrl + "?v=" + timestamp,
            dataType:"json",
            contenttype:"application/json",
            success:function(data){
                var datas = eval(data);
                    dicts = eval(data);
                query_model(datas);
                localData = datas; // 本地存储
            }
        });
        
        model_info = function(data){
            var datas = data;
            var html = [];
                html.push('<div class="info_title"><span>产品选择：</span><br>');
                for(var i = 0;i < datas.type_goods.length;i++){
                    html.push(datas.type_goods[i]);
                    html.push('&nbsp;');
                }
                html.push('</div>');
                html.push('<div class="info_title"><span>适用地区：</span><br>');
                for(var l = 0 ;l < datas.regions.length;l++){
                    html.push(datas.regions[l]);
                    html.push('&nbsp;');
                }
                html.push('</div>');
                html.push('<div class="info_title"><span>适用语言：</span><br>');
                for(var r = 0 ;r < datas.lang.length;r++){
                    html.push(datas.lang[r]);
                    html.push('&nbsp;');
                }
                html.push('</div>');
                if(datas.scene){
                    html.push('<div class="info_title"><span>场景：</span><br>'+ datas.scene +'</div>');
                }
                
                html.push('<div class="info_title"><span>功能：</span><br>'+ datas.special +'</div>');
                if(datas.style ){
                    html.push('<div class="info_title"><span>风格：</span><br>'+ datas.style +'</div>');
                }
                if(datas.type){
                    html.push('<div class="info_title"><span>样式：</span><br>'+ datas.type +'</div>');
                }
                html.push('<div class="info_title"><span>作者：</span><br>'+ datas.author +'</div>');
                // html.push('<div class="info_title"><a target="_blank" href="'+ datas.referto_links +'">'+ datas.referto_links +'</a></div>');
            //}
            $('#model_info').html('').append(html.join(''));
        }
        query_model = function(datas){
            
            var area_goods = "";
            var area_pay   = "";
            var area_regions = $.trim($('#id_zone').find('option:selected').text());
            var area_lang = $.trim($('#id_lang').find('option:selected').text());
            console.log(area_lang)
                module = $.trim($('#this_theme').val());

            var html = [],area_r = [],area_l = [], area_g = [],area_p = [];
            for(var i = datas.areamodel.length - 1; i >= 0 ;i--){
                if(area_regions != ""){
                    for(var r = 0 ;r < datas.areamodel[i].regions.length;r++){
                        if(area_regions == datas.areamodel[i].regions[r]){
                            area_r.push(datas.areamodel[i]);
                        }
                    }
                }else{
                    area_r.push(datas.areamodel[i]);
                }
            }
            for(var j = 0 ; j < area_r.length;j++){
                if(area_lang != ""){
                    for(var l = 0 ; l < area_r[j].lang.length;l++){
                        if(area_lang == area_r[j].lang[l]){
                            area_l.push(area_r[j]);
                        }
                    }
                }else{
                    area_l.push(area_r[j]);
                }
            }
            for(var k = 0 ; k < area_l.length;k++){
                if(area_goods != ""){
                    for(var g = 0 ; g < area_l[k].type_goods.length;g++){
                        if(area_goods == area_l[k].type_goods[g]){
                            area_g.push(area_l[k]);
                        }
                    }
                }else{
                    area_g.push(area_l[k]);
                }
            }
            for(var s = 0 ; s < area_g.length;s++){
                if(area_pay != ""){
                    for(var p = 0 ; p < area_g[s].pay_type.length;p++){
                        if(area_pay == area_g[s].pay_type[p]){
                            area_p.push(area_g[s]);
                        }
                    }
                }else{
                    area_p.push(area_g[s]);
                }
            }
            // 判断用户组专属模版
            switch( $('#username').val() ){
                case "事业五部一组":
                    var _area_p = [];
                    for( var o = 0 ; o < area_p.length;o++ ){
                        if( area_p[o].belong && area_p[o].belong == $('#username').val() ){
                            _area_p.push(area_p[o]);
                        }
                    }                
                    area_p = _area_p;
                    break;
                case "第6事业部营销1部业务1组":
                    var _area_p = [];
                    for( var o = 0 ; o < area_p.length;o++ ){
                        if( area_p[o].belong && area_p[o].belong == $('#username').val() ){
                            _area_p.push(area_p[o]);
                        }
                    }                
                    area_p = _area_p;
                    break;
                default:
                    var _area_p = [];
                    for( var o = 0 ; o < area_p.length;o++ ){
                        if( !area_p[o].belong ){ 
                            _area_p.push(area_p[o]);
                        }else{
                            if( $('#username').val() == 'buguniao' ){
                                _area_p.push(area_p[o]);
                            }else{
                                if( $('#username').val() == area_p[o]['belong'] ){
                                    _area_p.push(area_p[o]);
                                }
                            }
                        }
                    }  
                    area_p = _area_p;
                    break;
            }
            // 
            for(var o = 0 ; o < area_p.length;o++){
                if(module){
                    if(module == area_p[o].theme){
                        html.push('<div class="col-md-3 selected">');
                        model_info(area_p[o]);
                    }else{
                        html.push('<div class="col-md-3">');
                    }
                }else {
                    if(o == 0){
                        html.push('<div class="col-md-3 selected">');
                        model_info(area_p[o]);
                        window.parent.gettheme(area_p[o].theme,area_p[o].title);
                    }else{
                        html.push('<div class="col-md-3">');
                    }
                }
                html.push('<label>');
                html.push('<input type="radio" name="theme" value="'+ area_p[o].theme +'" style="position: absolute; opacity: 0">');
                html.push('<img src="http://cdn.stosz.com/image/theme/'+ area_p[o].title +'.jpg" alt="'+ area_p[o].theme +'" class="img-responsive">');
                html.push('<p class="theme-title"><em>'+ area_p[o].title+'</em>');
                html.push('<span style="float:right;">');
                html.push('<a href="'+(area_p[o].referto_links)+'" target="_blank">预览</a>');
                html.push('</span>');
                html.push('</p>');
                html.push('<p class="theme-type"> </p>');
                html.push('');
                html.push('</label>');
                html.push('</div>');
            }
            $('#models').html('').append(html.join(''));
        }
        //query_model(1);
        $('#mode_select').on('click', '.img-responsive', function(event) {
            event.preventDefault();
            /* Act on the event */
            var ff = $(this).parent().parent();
                ff.addClass('selected');
            $('#mode_select .col-md-3').not(ff).removeClass('selected');
            var theme = $(this).attr('alt');
            $('#setTheme').val(theme);
            var theme_title = $(this).siblings("p.theme-title").find('em').html();
            //console.log(theme_title);
            window.parent.gettheme(theme,theme_title);
            var datas = dicts;
            for(var i = 0 ; i < datas.areamodel.length;i++){
                if(theme == datas.areamodel[i].theme){
                    var thisdata = datas.areamodel[i];
                    model_info(thisdata);
                }
            }
            themeSelector.close();
        })
        .on('mouseover', '.img-responsive', function(event) {
            event.preventDefault();
            var theme = $(this).attr('alt');
            var datas = dicts;
            for(var i = 0 ; i < datas.areamodel.length;i++){
                if(theme == datas.areamodel[i].theme){
                    var thisdata = datas.areamodel[i];
                    model_info(thisdata);
                }
            }
        });

        // 
        var themeSelector = (function(){
            var main = $('#mode_select');
            function show(){
                main.show().removeClass('unActive');
                setTimeout(function(){ main.addClass('active'); }, 50);
                query_model(localData);
            }
            function close(){
                main.removeClass('active').addClass('unActive');
                setTimeout(function(){ main.hide(); }, 600);
            }
            return {
                show, close
            }
        })();

        // open theme selector 
        $('#theme_layer').click( themeSelector.show );

        // close theme selector
        $('#cancel_theme').click( themeSelector.close );

    });

    

</script>
